<template>
    <div class="home">
        <el-container class="container">
            <!-- 菜单 -->
            <el-aside class="menu_aside">
                <side-menu-vue />
            </el-aside>

            <el-container>
                <!-- 头部菜单 -->
                <el-header class="header">
                    <HearderVue/>
                </el-header>
                <!-- MAIN -->
                <el-main>
                    <BreadVue class="bread"/>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import SideMenuVue from "../components/SideMenu.vue";
import HearderVue from '../components/index/Hearder.vue';
import BreadVue from '../components/index/Bread.vue';

export default {
    components: { SideMenuVue, HearderVue, BreadVue}
};
</script>
<style scoped>
.bread{
    margin-bottom: 30px;
}
.home{
    background-color: white;
}
.container {
    height: 1000px;
}
.menu_aside {
    width: 200px;
    background-color: white;
    border: 1px solid #eee;
}
.header {
    height: 150px;
}
</style>
